<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading"
            :bordered="false"
            :body-style="{'padding': '10px 20px'}"
            size="small"
            title="我的工时表">
      <a-table
        :columns="columns"
        rowKey="id"
        :pagination="ipagination"
        :data-source="dataSource"
        :loading="loading"

        @change="handleTableChange"
        style="margin-bottom: 10px;background-color: #F3F3F3;"
        size="small"
       >
        <a slot="period" slot-scope="scope,record" @click="showPeriod(record)">
          {{ scope }}</a>
      </a-table>
      <span style="color: #A9A9A9;">面板显示您最近5个工时期间的工时填报情况，点击任一期间可填报该期间的工时记录，点击添加按钮仅填报当前期间的工时表。</span>
      <div style="margin:10px 0">
        <a-button type="primary" @click="add">添加</a-button>
      </div>
    </a-card>
    <ts-detail-modal ref="TsDetailModal" @ok="initData"/>
  </div>
</template>
<script>
  import TsDetailModal from '@views/time/modules/TsDetailModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'

  export default {
    name:'MyTs',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      TsDetailModal
    },
    data() {
      return {
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5', '10', '20'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        columns : [
          {
            title: '期间',
            dataIndex: 'period',
            scopedSlots: { customRender: 'period' },
          },
          {
            title: '工时',
            dataIndex: 'sumhours',
          }
        ],
        url: {
          list: "/tbPeriodsDetail/getMyPeriodPage",
        },
      }
    },
    methods: {
      initData(){
        this.$emit('ok');
      },
      showPeriod(value){
        this.$refs.TsDetailModal.title = '编辑'
        this.$refs.TsDetailModal.model.periodId = value.id
        this.$refs.TsDetailModal.edit()
      },
      add(value) {
        this.$refs.TsDetailModal.title = '新增'
        this.$refs.TsDetailModal.add()
      }
    }
  }
</script>